<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .yuan {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: red;
        }

        #conent {
            width: 500px;
            height: 500px;
            background-color: antiquewhite;
            display: flex;
            align-items: center;
            justify-content: center;

        }

        #inner {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <!-- 10 -->
      <!-- 10．请写出一个圆的 css 样式？ -->
    <div class="yuan"></div>
    <!-- 11．如图，父元素＃ content 大小未知，子元素＃ inner 宽高都为50px设置 inner 的样式，使其在＃ content 的正中央显示。(垂直水平居中)  -->
    <div id="conent">
        <div id="inner"></div>
    </div>
</body>
<script>
    // 一.逻辑题
    // 1.合力亿捷有520名员工，期中400名做项目开发，
    //  100名做产品开发，60名即做产品开发又做项目开发，请问既不做产品又不做项目的员工多少名？

    //2.有7克的、2克砝码各一个，天平一只，如何只用这些物品三次将140克的糖分50、90克各一份

    //二、专业题
    //1.javascript的typeof返回的哪些数据类型
    //基本数据类型 ："Number","undefined","Object","boolean","string","function","symbol"
    // console.log(typeof );

    //2.split()和join()有什么区别？
    // let arr=[1,2,3]
    // console.log(arr.join("|"));
    // console.log(arr.split(-1));
    //split str： 表示为分隔符，默认为空格，但是不能为空(’’)。若字符串中没有分隔符，则把整个字符串作为列表的一个元素
         //num：表示分割次数。如果存在参数num，则仅分隔成 num+1 个子字符串，并且每一个子字符串可以赋给新的变量
    //join可以在每一个内容之间加东西 方法用于把数组中的所有元素放入一个字符串给数组使用---------变成字符串


    //3.事件委托是什么?
    //事件委托称之为事件代理，通俗来讲就是把一个响应的元素通过事件委托委托到另外一个元素
    //时间代理分三个阶段 分别是捕获阶段-目标阶段-冒泡阶段
    //事件代理就会把一个元素或者多个元素委托到它的父级或者更外层的元素

    //4.添加 删除 替换 插入到某个节点的方法？
    // appendChild()：添加子节点到末尾
    // removeChild()   删除
    // replaceChild(新节点，老节点)   替换
    // nsertBefore(新节点，老节点)：在某个节点之前插入一个新的节点

    //5.获取到页面中所有的checkbox怎么做（不使用第三方框架）
    // var domchecked = document.getElementsByTagName('input');  //首先获取他的dom元素
    // var checkboxList = [];  //创建一个数组
    // var len = domchecked.length;　　//缓存到局部变量
    // while (len--) {　　//使用while的效率会比for循环更高
    //     if (domList[len].type == 'checkbox') {
    //         checkboxList.push(domList[len]);
    //     }
    // }

    //6.看下列代码输出为何？解释原因
    var foo = "11" + 2 - "1"
    console.log(foo);  //111
    console.log(typeof foo); //number
    //"11"+2结果是112，因为是字符串和数值所以拼接 type是string，但是-“1”，使得foo转化成数字类型进行运算了 就是111  类型type是number

    //7.已知字符出 foo="get-element-yb-id",写一个function将转化为驼峰式命名法 "getElementByid"
    var foo = "get-element-by-id"
    var arr = foo.split("-");  //split是将字符串分割为字符串数组
    console.log(arr); //["get", "element", "by", "id"]
    for (var i = 1; i < arr.length; i++) {
        arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1); //toUpperCase转化为大写，arr[i].charAt(0).toUpperCase() 得到的是 E B I
        //注意：这里i是从1开始，因为["get", "element", "by", "id"] 中的get的首字母不需要大写
    }
    console.log(arr) //["get", "Element", "By", "Id"]
    var arr = arr.join("") //getElementById  关键是join方法，将数组放入一个字符串中，默认是以逗号隔开，写了"" 字符串就是一坨
    console.log(arr);


    //8.请介绍javascript的splice()的方法
    //splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
    //参数
    // start 指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。
    // deleteCount 可选整数，表示要移除的数组元素的个数。如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。
    //item1, item2, *...* 可选要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

    //9.attachEvent和addEventListener
    //attachEvent方法适用于IE    addEventListener方法适用于FF
    //attachEvent中的事件带on   而addEventListener中的事件不带on
    //所有的DOM节点都包含这两个方法，并且他们都接受三个参数：
    // 1.事件类型
    // 2.事件处理方法
    // 3.布尔参数，默认false

    //12.编写js方法，找出数组arr中过滤的重复的元素
    var foo = [1, 2, 4, 4, 3, 3, 1, 5, 3].sort()
    console.log(new Set(foo));
    // function foo(arr) {
    //   var brr = []
    //   arr.sort((a, b) => {
    //     return a - b;
    //   })
    //   arr.forEach((item, i) => {
    //     if (item == arr[i + 1]) {
    //       brr.push(item)
    //       brr = Array.from(new Set(brr));
    //     }
    //   })
    //   return brr
    // }
    // console.log(foo([1, 2, 4, 4, 3, 3, 1, 5, 3]).sort());

    //13.编写js方法，提取url中的参数，并以key-value的形式返回到一个json结构
    function ListUrl(url) {
            var result = {};
            url = url.split("?")[1];
            var map = url.split("&");
            for (var i = 0, len = map.length; i < len; i++) {
                result[map[i].split("=")[0]] = map[i].split("=")[1];
            }
            return result;
        }
        console.log(ListUrl('http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e'))

              // 14．请问以下代码输出的结果是什么？应该怎样使其输出0,1,2,3

              for(let i=0;i<=3;i++){
                    setTimeout(()=>{
                        console.log(i);
                    },1000)
              }

        // for (var i = 0; i <= 3; i++) {
        //     (function (a) {                //(()=>)是自动执行函数   自执行函数 (()=>{})() 或者 (()=>{}())
        //         setTimeout(() => {
        //             console.log(a);
        //         }, i * 1000);     // i*1000 表示： 每隔1秒执行一次
        //     })(i) // i 接受外部参数
        // }
        // console.log(i); // 6 , 1,2,3,4,5
</script>

</html>